.checkbox {
  opacity: 0;
  margin-right: 8px;
}

.label {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  color: var(--input-label-color);

  &.disabled, &[aria-disabled] {
    color: var(--input-label-color-disabled);

    .check-mark {
      border: var(--checkbox-border-disabled);
    }
  }
}

.check-mark {
  position: absolute;
  width: 16px;
  height: 16px;
  border: var(--checkbox-border);
  background: transparent;
  transition: background 75ms ease-in, border 75ms ease-in;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    -webkit-mask: url('../../media/ic_check.svg');
    -webkit-mask-size: 16px;
  }

  &.checked {
    &::before {
      background: var(--checkbox-checkmark-color);
    }
    &[disabled]::before {
      background: var(--checkbox-bg-disabled);
    }
    background: var(--checkbox-bg-checked);
    border: 1px solid var(--checkbox-bg-checked);
  }

  &.indeterminate {
    &::before {
      background: var(--checkbox-bg-checked); //invert the colors for indeterminate
      -webkit-mask: url('../../media/ic_indeterminate.svg');
    }
    &[disabled]::before {
      background: var(--checkbox-bg-disabled);
      border: 1px solid var(--checkbox-bg-disabled);
    }
    border: 1px solid var(--checkbox-bg-checked);
  }

  &.focused.checked::after {
    border: var(--input-border-focus);
  }

  &.focused::after {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: -2px;
    left: -2px;
    border: 2px solid var(--global-focus-outline-color);
  }
}

.aria-live-region {
  position: absolute;
  top: -9999px;
  overflow: hidden;
}
